<template>
	<view class="page" v-if="strategy">
		<!-- 顶部栏 -->
		<view class="appbar">
			<view class="appbar-left tap" @tap="uni.navigateBack()">
				<text class="back">‹</text>
			</view>
			<text class="appbar-title">策略详情</text>
			<view class="appbar-right">
				<view class="dot"></view>
			</view>
		</view>

		<!-- Hero 基础信息（渐变描边） -->
		<view class="hero">
			<view class="hero-inner">
				<view class="hero-top">
					<view class="hero-left">
						<text class="name">{{ strategy.name }}</text>
						<view class="meta">
							<text class="tag">{{ strategy.exchange }}</text>
							<text class="tag ghost">{{ strategy.symbol }}</text>
							<text class="tag ghost">{{ strategy.style }}</text>
						</view>
					</view>
					<view class="hero-right">
						<view class="risk" :class="'risk-' + strategy.risk">
							{{ riskLabel(strategy.risk) }}
						</view>
					</view>
				</view>

				<view class="desc">
					{{ strategy.intro }}
				</view>

				<view class="hero-foot">
					<view class="badge">
						<text class="muted tiny">跟单人数</text>
						<text class="badge-v">{{ strategy.followers }}</text>
					</view>
					<view class="badge">
						<text class="muted tiny">交易频率</text>
						<text class="badge-v">{{ strategy.tradeFreq }}</text>
					</view>
					<view class="badge">
						<text class="muted tiny">胜率</text>
						<text class="badge-v">{{ strategy.winRate }}%</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 历史表现 -->
		<view class="card">
			<view class="card-head">
				<text class="section-title">历史表现</text>
				<text class="section-sub muted">示例数据 · 近30天</text>
			</view>

			<!-- 2x2 居中指标块 -->
			<view class="grid2">
				<view class="metric">
					<view class="metric-box">
						<text class="muted tiny">近30日收益</text>
						<text class="metric-v" :class="strategy.monthProfit >= 0 ? 'up' : 'down'">
							{{ formatSigned(strategy.monthProfit) }}%
						</text>
						<text class="metric-sub muted">收益表现</text>
					</view>
				</view>

				<view class="metric">
					<view class="metric-box">
						<text class="muted tiny">最大回撤</text>
						<text class="metric-v down">{{ strategy.maxDrawdown }}%</text>
						<text class="metric-sub muted">风险强度</text>
					</view>
				</view>

				<view class="metric">
					<view class="metric-box">
						<text class="muted tiny">胜率</text>
						<text class="metric-v">{{ strategy.winRate }}%</text>
						<text class="metric-sub muted">命中情况</text>
					</view>
				</view>

				<view class="metric">
					<view class="metric-box">
						<text class="muted tiny">年化收益</text>
						<text class="metric-v">{{ strategy.annualReturn }}%</text>
						<text class="metric-sub muted">参考指标</text>
					</view>
				</view>
			</view>

			<!-- 回撤条（统一风格） -->
			<view class="barwrap">
				<view class="row">
					<text class="muted tiny">回撤程度</text>
					<text class="muted tiny">0% ~ 30% 显示</text>
				</view>
				<view class="bar">
					<view class="bar-fill" :style="{ width: clampPercent(strategy.maxDrawdown, 0, 30) + '%' }"></view>
				</view>
			</view>
		</view>

		<!-- 风险提示 -->
		<view class="card warn-card">
			<view class="card-head">
				<text class="section-title">风险提示</text>
				<text class="section-sub warn">高波动资产 · 谨慎使用杠杆</text>
			</view>
			<text class="warn-text">
				本策略不保证收益，存在回撤与爆仓风险。请合理控制跟单资金和杠杆，建议仅使用可承受亏损的资金。
			</text>
		</view>

		<!-- 跟单配置 -->
		<view class="card">
			<view class="card-head">
				<text class="section-title">跟单配置</text>
				<text class="section-sub muted">建议先小额试运行</text>
			</view>

			<view class="form">
				<view class="field">
					<view class="field-head">
						<text class="field-k">跟单资金</text>
						<text class="field-unit muted">USDT</text>
					</view>
					<input class="field-input" type="number" v-model.number="followAmount" placeholder="例如：500"
						placeholder-class="ph" />
				</view>

				<view class="field">
					<view class="field-head">
						<text class="field-k">最大杠杆倍数</text>
						<text class="field-unit muted">x</text>
					</view>
					<input class="field-input" type="number" v-model.number="maxLeverage" placeholder="例如：3"
						placeholder-class="ph" />
				</view>

				<view class="field">
					<view class="field-head">
						<text class="field-k">单日最大亏损</text>
						<text class="field-unit muted">%</text>
					</view>
					<input class="field-input" type="number" v-model.number="maxDailyLoss" placeholder="例如：5，达到后自动暂停"
						placeholder-class="ph" />
				</view>

				<view class="field row">
					<view>
						<text class="field-k">模拟模式</text>
						<text class="field-h muted">仅本地模拟，不下真实订单</text>
					</view>
					<switch :checked="simulateMode" @change="onToggleSim" />
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-bar">
			<view class="bottom-inner">
				<view class="summary">
					<text class="muted tiny">预计跟单</text>
					<text class="sum-v">{{ followAmount || 0 }} USDT</text>
				</view>
				<button class="btn-main tap" @tap="startFollow">
					开始跟单
				</button>
			</view>
		</view>

		<view class="safe"></view>
	</view>

	<view v-else class="page">
		<view class="appbar">
			<view class="appbar-left tap" @tap="uni.navigateBack()">
				<text class="back">‹</text>
			</view>
			<text class="appbar-title">策略详情</text>
			<view class="appbar-right">
				<view class="dot"></view>
			</view>
		</view>
		<view class="empty">
			<text class="empty-title">策略不存在或加载失败</text>
			<text class="empty-sub">请返回重新选择</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getStrategyById
	} from '@/common/strategy-data.js'

	const strategy = ref(null)

	const followAmount = ref(500)
	const maxLeverage = ref(3)
	const maxDailyLoss = ref(5)
	const simulateMode = ref(false)

	const formatSigned = (num) => {
		const n = Number(num)
		if (isNaN(n)) return num
		return (n > 0 ? '+' : '') + n.toFixed(1)
	}

	const riskLabel = (risk) => {
		if (risk === 'low') return '保守'
		if (risk === 'mid') return '平衡'
		if (risk === 'high') return '激进'
		return '未知'
	}

	const clampPercent = (val, min, max) => {
		const n = Number(val)
		if (isNaN(n)) return 0
		const clamped = Math.max(min, Math.min(max, n))
		return (clamped / max) * 100
	}

	onLoad((options) => {
		const {
			id
		} = options
		const s = getStrategyById(id)
		if (s) {
			strategy.value = s
		} else {
			uni.showToast({
				title: '策略未找到',
				icon: 'none'
			})
		}
	})

	const onToggleSim = (e) => {
		simulateMode.value = e.detail.value
	}

	const startFollow = () => {
		if (!strategy.value) return
		if (!followAmount.value || followAmount.value <= 0) {
			uni.showToast({
				title: '请输入合法的跟单资金',
				icon: 'none'
			})
			return
		}

		const followItem = {
			strategyId: strategy.value.id,
			name: strategy.value.name,
			exchange: strategy.value.exchange,
			symbol: strategy.value.symbol,
			risk: strategy.value.risk,
			followAmount: followAmount.value,
			maxLeverage: maxLeverage.value,
			maxDailyLoss: maxDailyLoss.value,
			simulateMode: simulateMode.value,
			startedAt: Date.now()
		}

		let list = []
		try {
			const raw = uni.getStorageSync('followingStrategies')
			if (raw) list = JSON.parse(raw)
		} catch (e) {}

		const idx = list.findIndex(i => i.strategyId === followItem.strategyId)
		if (idx >= 0) list[idx] = followItem
		else list.push(followItem)

		uni.setStorageSync('followingStrategies', JSON.stringify(list))
		uni.showToast({
			title: '已开始跟单（本地模拟）',
			icon: 'success'
		})

		setTimeout(() => {
			uni.switchTab({
				url: '/pages/orders/index'
			})
		}, 500)
	}
</script>

<style scoped>
	/* 同款背景 */
	.page {
		min-height: 100vh;
		padding: 22rpx 22rpx 120rpx;
		box-sizing: border-box;
		color: #EAF0FF;
		background:
			radial-gradient(1200rpx 900rpx at 15% 8%, rgba(56, 189, 248, .14), transparent 60%),
			radial-gradient(1100rpx 800rpx at 85% 12%, rgba(34, 197, 94, .10), transparent 60%),
			radial-gradient(1000rpx 800rpx at 60% 92%, rgba(168, 85, 247, .10), transparent 60%),
			#050816;
	}

	.page,
	.page * {
		box-sizing: border-box;
	}

	/* Appbar */
	.appbar {
		height: 92rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		margin-bottom: 12rpx;
	}

	.appbar-left {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 84rpx;
		height: 84rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.back {
		font-size: 44rpx;
		line-height: 1;
		color: rgba(234, 240, 255, .85);
		padding-left: 6rpx;
	}

	.appbar-title {
		font-size: 30rpx;
		font-weight: 950;
		letter-spacing: .5rpx;
	}

	.appbar-right {
		position: absolute;
		right: 6rpx;
		top: 50%;
		transform: translateY(-50%);
		opacity: .8;
	}

	.dot {
		width: 14rpx;
		height: 14rpx;
		border-radius: 999rpx;
		background: rgba(255, 255, 255, .35);
	}

	/* Hero 渐变描边 */
	.hero {
		border-radius: 34rpx;
		padding: 2rpx;
		margin-bottom: 18rpx;
		background: linear-gradient(135deg, rgba(56, 189, 248, .26), rgba(34, 197, 94, .12), rgba(168, 85, 247, .18));
	}

	.hero-inner {
		border-radius: 32rpx;
		padding: 24rpx;
		background: rgba(10, 14, 30, .72);
		box-shadow: 0 24rpx 70rpx rgba(0, 0, 0, .55), inset 0 1rpx 0 rgba(255, 255, 255, .10);
		backdrop-filter: blur(14px);
	}

	.hero-top {
		display: flex;
		justify-content: space-between;
		gap: 14rpx;
	}

	.name {
		font-size: 30rpx;
		font-weight: 980;
		line-height: 1.2;
	}

	.meta {
		margin-top: 12rpx;
		display: flex;
		gap: 10rpx;
		flex-wrap: wrap;
	}

	.tag {
		font-size: 20rpx;
		padding: 8rpx 14rpx;
		border-radius: 999rpx;
		background: rgba(255, 255, 255, .06);
		color: rgba(234, 240, 255, .72);
	}

	.ghost {
		background: transparent;
		border: 1rpx solid rgba(255, 255, 255, .08);
		color: rgba(234, 240, 255, .55);
	}

	/* 风险 */
	.risk {
		font-size: 20rpx;
		padding: 8rpx 14rpx;
		border-radius: 999rpx;
		border: 1rpx solid rgba(255, 255, 255, .08);
		background: rgba(255, 255, 255, .04);
	}

	.risk-low {
		color: rgba(34, 197, 94, 1);
		background: rgba(34, 197, 94, .10);
		border-color: rgba(34, 197, 94, .18);
	}

	.risk-mid {
		color: rgba(245, 158, 11, 1);
		background: rgba(245, 158, 11, .10);
		border-color: rgba(245, 158, 11, .18);
	}

	.risk-high {
		color: rgba(239, 68, 68, 1);
		background: rgba(239, 68, 68, .10);
		border-color: rgba(239, 68, 68, .18);
	}

	.desc {
		margin-top: 16rpx;
		font-size: 24rpx;
		line-height: 1.55;
		color: rgba(234, 240, 255, .72);
	}

	/* hero badges */
	.hero-foot {
		margin-top: 18rpx;
		display: flex;
		gap: 12rpx;
	}

	.badge {
		flex: 1;
		padding: 14rpx 14rpx;
		border-radius: 18rpx;
		background: rgba(255, 255, 255, .05);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.badge-v {
		margin-top: 6rpx;
		font-size: 24rpx;
		font-weight: 950;
	}

	/* Card */
	.card {
		border-radius: 28rpx;
		padding: 22rpx;
		margin-bottom: 14rpx;
		background: rgba(12, 16, 34, .62);
		border: 1rpx solid rgba(255, 255, 255, .06);
		box-shadow: 0 18rpx 55rpx rgba(0, 0, 0, .45);
		backdrop-filter: blur(12px);
	}

	.card-head {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		margin-bottom: 12rpx;
	}

	.section-title {
		font-size: 28rpx;
		font-weight: 980;
	}

	.section-sub {
		font-size: 22rpx;
	}

	.muted {
		color: rgba(234, 240, 255, .60);
		font-size: 22rpx;
	}

	.tiny {
		font-size: 20rpx;
	}

	.warn {
		color: rgba(245, 158, 11, 1);
	}

	/* 2列指标：稳定布局 + 内容居中 */
	.grid2 {
		display: flex;
		flex-wrap: wrap;
		margin: -7rpx;
	}

	.metric {
		width: 50%;
		padding: 7rpx;
	}

	.metric-box {
		padding: 18rpx;
		border-radius: 22rpx;
		background: rgba(255, 255, 255, .04);
		border: 1rpx solid rgba(255, 255, 255, .05);

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;

		min-height: 170rpx;
	}

	.metric-v {
		margin-top: 10rpx;
		font-size: 36rpx;
		font-weight: 980;
		line-height: 1.1;
	}

	.metric-sub {
		margin-top: 10rpx;
		font-size: 20rpx;
	}

	/* bar */
	.barwrap {
		margin-top: 14rpx;
	}

	.row {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.bar {
		margin-top: 10rpx;
		height: 12rpx;
		border-radius: 999rpx;
		background: rgba(255, 255, 255, .08);
		overflow: hidden;
	}

	.bar-fill {
		height: 100%;
		border-radius: 999rpx;
		background: linear-gradient(90deg, rgba(239, 68, 68, .18), rgba(239, 68, 68, .95));
	}

	/* warn card */
	.warn-card {
		position: relative;
		border-color: rgba(245, 158, 11, .22);
		background:
			radial-gradient(900rpx 360rpx at 20% 0%, rgba(245, 158, 11, .10), transparent 60%),
			rgba(12, 16, 34, .62);
	}

	.warn-text {
		font-size: 24rpx;
		line-height: 1.6;
		color: rgba(245, 158, 11, .92);
	}

	/* 表单 */
	.form {
		display: flex;
		flex-direction: column;
		gap: 14rpx;
	}

	.field {
		padding: 16rpx 16rpx;
		border-radius: 22rpx;
		background: rgba(255, 255, 255, .04);
		border: 1rpx solid rgba(255, 255, 255, .06);
	}

	.field.row {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.field-head {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.field-k {
		font-size: 24rpx;
		font-weight: 900;
		color: rgba(234, 240, 255, .86);
	}

	.field-unit {
		font-size: 20rpx;
	}

	.field-h {
		margin-top: 6rpx;
		display: block;
	}

	.field-input {
		height: 72rpx;
		border-radius: 18rpx;
		padding: 0 16rpx;
		background: rgba(12, 16, 34, .55);
		border: 1rpx solid rgba(255, 255, 255, .06);
		color: #EAF0FF;
		font-size: 26rpx;
	}

	.ph {
		color: rgba(234, 240, 255, .45);
	}

	/* 底部栏 */
	.bottom-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 14rpx 22rpx 20rpx;
		background: rgba(5, 8, 22, .92);
		border-top: 1rpx solid rgba(255, 255, 255, .06);
		backdrop-filter: blur(12px);
	}

	.bottom-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14rpx;
	}

	.summary {
		flex: 1;
	}

	.sum-v {
		display: block;
		margin-top: 6rpx;
		font-size: 24rpx;
		font-weight: 980;
	}

	.btn-main {
		width: 320rpx;
		height: 84rpx;

		/* 关键：强制垂直水平居中 */
		display: flex;
		align-items: center;
		justify-content: center;

		/* 清掉不同端 button 默认内边距/行高影响 */
		padding: 0;
		line-height: 84rpx;
		/* 保险：就算某端不吃 flex 也能居中 */
		box-sizing: border-box;

		border-radius: 999rpx;
		color: #071018;
		font-size: 28rpx;
		font-weight: 980;

		background: linear-gradient(135deg, rgba(56, 189, 248, .95), rgba(34, 197, 94, .85));
		box-shadow: 0 18rpx 45rpx rgba(0, 0, 0, .35);
		border: 0;
	}


	/* colors */
	.up {
		color: rgba(34, 197, 94, 1);
	}

	.down {
		color: rgba(239, 68, 68, 1);
	}

	/* empty */
	.empty {
		margin-top: 80rpx;
		padding: 36rpx 22rpx;
		text-align: center;
		border-radius: 26rpx;
		background: rgba(255, 255, 255, .03);
		border: 1rpx solid rgba(255, 255, 255, .06);
	}

	.empty-title {
		font-size: 28rpx;
		font-weight: 950;
		display: block;
	}

	.empty-sub {
		margin-top: 12rpx;
		font-size: 22rpx;
		color: rgba(234, 240, 255, .55);
		display: block;
	}

	.safe {
		height: 40rpx;
	}

	/* tap */
	.tap {
		transition: transform .12s ease, opacity .12s ease;
	}

	.tap:active {
		transform: scale(.98);
		opacity: .92;
	}
</style>